<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lato:200");
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
			  background-size: cover;
			  background-position: center;
			}
			
			.frosted-glass {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 72vw;
			  height: 36vh;
			  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
			  -webkit-backdrop-filter: blur(20px);
			          backdrop-filter: blur(20px);
			  transition: 0.5s ease;
			}
			.frosted-glass:hover {
			  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
			}
			.frosted-glass .title {
			  padding-left: 0.375em;
			  font-size: 3.6em;
			  font-family: Lato, sans-serif;
			  font-weight: 200;
			  letter-spacing: 0.75em;
			  color: white;
			}
			@media (max-width: 640px) {
			  .frosted-glass .title {
			    font-size: 2em;
			  }
			}
		</style>
	</head>
	<body>
		<div class="frosted-glass">
		  <h1 class="title">just do it!</h1>
		</div>
	</body>
</html>
